<template>
  <div id="polyline"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

export default {
  props: ["chartData"],
  watch: {
    chartData() {
      if (this.chartData.length !== 0 && this.loading) {
        this.initChart();
        this.loading = false
      }
    },
  },
  methods: {
    initChart() {
      echarts.use([
        TitleComponent,
        ToolboxComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        LineChart,
        CanvasRenderer,
        UniversalTransition,
      ]);
      const chartDom = document.getElementById("polyline");
      this.myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["北仑", "慈溪", "海曙", "江北", "鄞州", "余姚", "镇海"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.chartData[0],
        },
        yAxis: {
          type: "value",
          max: -100,
        },
        series: this.chartData[1],
      };
      option && this.myChart.setOption(option);
    },
  },
  data(){
    return {
      loading:true
    }
  }
};
</script>

<style scoped>
#polyline {
  width: 98%;
  height: 290px;
}
</style>
